<template>
	<div>
		<el-dialog
		  :title="dataForm.userId?'修改':'添加'"
		  :visible.sync="dialogVisible"
		  :close-on-click-modal="false"
		  width="40%"
		  :before-close="handleClose">
		  <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="submitFun()" v-loading="loading" label-position="right" label-width="80px">
		  	<el-form-item label="名称" prop="approverName">
		  		<el-input v-model.trim="dataForm.approverName" placeholder="名称" disabled></el-input>
		  	</el-form-item>
		  	<el-form-item label="审批人" prop="userIds">
		  		<el-select @change="handRole" multiple collapse-tags class="goodsindex-queryInfo-li" v-model="dataForm.userIds" clearable placeholder="请选择审批人">
		  		    <el-option
		  		    v-for="item in userList"
		  		    :key="item.userId"
		  		    :label="item.userName"
		  		    :value="item.userId">
		  		    </el-option>
		  		</el-select>
		  	</el-form-item>
		  </el-form>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="dialogVisible = false">取 消</el-button>
		    <el-button type="primary" @click="submitFun" :disabled="isdisabled">确 定</el-button>
		  </span>
		</el-dialog>

	</div>
</template>

<script>
	export default {
		name:'userAddorUpdata',
	    data(){
	        return {
				 dialogVisible: false,
				 loading:false,
				 isdisabled:false,//防止确认二次点击
				 dataForm: {
					approverId:0,
                    approverCode:'',
                    approverName: '',
					userIds:[],
				 },
                 userList: [],
				 dataRule: {
				 	username: [{
				 		required: true,
				 		message: '用户名不能为空',
				 		trigger: 'blur'
				 	}],
				 }
	        }
	    },
	    methods: {
			async init(userId){
			    this.dialogVisible=true;
				this.dataForm.userId=userId;
				this.$nextTick(()=>{
				  this.$refs.dataForm.resetFields();
				  this.isdisabled=false;
				})
				//用户下拉框
                await this.Sevice({ url: 'sys/user/select', method: 'post' }).then(res => {
                if (res && res.code == 200) {
                    this.userList = res.select;
                }
            }).catch(err => {
                console.log(err);
            })
				if(!userId){
					//新增
				}else{
					//修改
					//获取用户信息
					this.Sevice({
					   url:'sys/approver/info/'+userId,
					   method:'get'
					}).then(res=>{
					   if(res&&res.code==200){
						   this.dataForm.approverCode=res.info.approverCode;
                           this.dataForm.approverId=res.info.approverId;
                           this.dataForm.approverName=res.info.approverName;
                           if(res.info.userIds){
                            let userIds=res.info.userIds.split(',').map(i=>{return Number(i)})
                            this.dataForm.userIds=userIds;
                           }
					   }
					}).catch(err=>{
						console.log(err);
					})
				}
			},
			//选择角色
			handRole(value){
				console.log(value)
				this.dataForm.roleIdList=value;
			},
			//关闭弹窗
			handleClose(done) {
				done();
			},
			//提交
			submitFun(){
					this.$refs['dataForm'].validate((valid) => {
						if(valid){
							this.isdisabled=true;
							let urlApi = 'sys/approver/update'
							//提交表单
							this.Sevice({
							   url:urlApi,
							   method:'post',
							   data:{
                                approverCode:this.dataForm.approverCode,
                                approverId:this.dataForm.approverId,
                                approverName:this.dataForm.approverName,
                                userIds:JSON.parse(JSON.stringify(this.dataForm.userIds)).toString(),
							   }
							}).then(res=>{
							   if(res&&res.code==200){
								   this.dialogVisible = false;
								   this.$message({
								         message: res.msg,
								         type: 'success',
								         duration: 1500,
								         onClose: () => {
								           this.$emit('getUserlist')
										   this.isdisabled=false;
								         }
								       })
							   }else{
								   this.isdisabled=false;
							   }
							}).catch(err=>{
								console.log(err);
								this.isdisabled=false;
							})
						}
					})
			}
	    }
	}
</script>

<style>
</style>
